<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
		<view class="container" :style="{height: containerHeight + 'px'}">
			<view class="orderList" :style="{height: orderListHeight + 'px' }">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}" @tap="changeWidth()">
					<text :style="{width:tdWidth[index]+'px'}" v-for="(item,index) in tdHeaderList" :key="index">
						{{item.name}}
					</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in QCKCList" :key="index" @tap="deleteRow(index)">
						<text :style="{width:tdWidth[0]+'px'}">
							{{index+1}}
						</text>
						<text :style="{width:tdWidth[1]+'px'}">
							<!-- 数量 -->
							{{item.Qty | setSendFloat}}
						</text>
						<text :style="{width:tdWidth[2]+'px'}">
							{{item.Price | setSendFloat}}
						</text>
						<text :style="{width:tdWidth[3]+'px'}">
							{{(item.Qty*item.Price) | setSendFloat}}
						</text>
						<text :style="{width:tdWidth[4]+'px'}">
							{{item.StoreName }}
						</text>
					</view>
				</view>
			</view>
			<view class="flOptions">
				<button @tap="showModal" data-target="DialogModal1">新增</button>
			</view>
			<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">新增初期库存</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view>
						<view class="cu-form-group">
							<view class="title">期初数量：</view>
							<input placeholder="0.00" name="input" class="gs" v-model="Qty" type="number"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">成本单价：</view>
							<input placeholder="0.00" name="input" class="gs" v-model="Price" type="number"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">*仓&emsp;&nbsp;&nbsp;库&nbsp;:</view>
							<view class="inpt1"><input type="text" placeholder="点击获取" :value="SelectStoreObj.StoreName" disabled="true"
								 style="text-align: left;" data-target="StoreModal" @tap="showModals" />
								
							</view>
						</view>
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-blue" @tap="hideModal">取消</button>
							<button class="cu-btn bg-blue margin-left" @tap="Add()">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='StoreModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择仓库</view>
					<view class="action" @tap="hideModals">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="searchStore">
						<input placeholder="请输入仓库名称" v-model="SearchStoreName" @input="filterStore" />
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempStoreList" :key="item.StoreID" @tap="selectStore(index)">{{item.StoreName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	import * as Api from '@/syApis/syDa/syDa.js';
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	export default {
		components: {
			xflSelect
		},
		created() {

			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.GetStoreMessage();
			let qckc = uni.getStorageSync("qckc", "");
			if (qckc != '') {
				try {
					let qckcObj = JSON.parse(qckc);
					if (typeof qckcObj == 'object') {
						this.QCKCList = qckcObj;
					}
				} catch (e) {
					console.log(e);
				}
			}
		},
		filters:{
			setSendFloat(val){
				if(val==""|| typeof val == 'undefined'){
					return val;
				}
				return Math.round(val*100)/100;
			}
		},
		onShow() {
			var $this = this;
			uni.getSystemInfo({
				success(res) {
					$this.wrapperHeight = res.windowHeight;
					$this.containerHeight = res.windowHeight - 48;
					console.log(res.windowHeight - 48);
					$this.orderListHeight = res.windowHeight - 48;
					$this.orderLiHeight = res.windowHeight - 88;
				}
			});
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		onLoad(options) {

			if (typeof options.GoodsID != 'undefined' && options.GoodsID != 'undefined') {
				// this.GoodsID = options.GoodsID;
				this.GetGoodsEarlyMessage(options.GoodsID);
				this.isAdd = false;
			}
		},
		methods: {
			searchStore(){
				let data = {
					detail:{
						value:this.SearchStoreName
					}
				}
				this.filterStore(data)
			},
			//选择仓库
			selectStore(index) {
				this.SelectStoreObj = this.TempStoreList[index];
				this.modalName = "DialogModal1";
			},
			filterStore(e) {
				let value = e.detail.value;
				this.TempStoreList = [];
				var that = this;
				this.storeList.forEach((item, index) => {
					if (item.StoreName.indexOf(value) > -1) {
						that.TempStoreList.push(item);
					}
				});
				// console.log(that.TempStoreList);
				if (that.TempStoreList.length == 0) {
					Api.showTip("查无数据");
				}
			},
			deleteRow(index) {
				var that = this;
				if (this.isAdd) {
					uni.showModal({
						title: '提示',
						content: "是否删除此行",
						style: "z-index:9999",
						success: function(res) {
							if (res.confirm) {
								let tempList = [];
								that.newQCList.forEach(($item, $index) => {
									if (index != $index) {
										tempList.push($item);
									}
								});
								that.newQCList = tempList;
								// console.log(JSON.stringify(this.newQCList));
								uni.setStorageSync("qckc", JSON.stringify(that.newQCList));
								let tempQCKCList = [];
								that.QCKCList.forEach(($item, $index) => {
									if (index != $index) {
										tempQCKCList.push($item);
									}
								});
								that.QCKCList = tempQCKCList;
							} else if (res.cancel) {

							}
						}
					});
				}
			},
			//获取期初库存
			GetGoodsEarlyMessage(GoodsID) {
				let data = {
					GoodsID: GoodsID
				};
				var that = this;
				Api.Get_GoodsEarlyMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {

						} else if (res.data.ErrorMsg == "此商品已经被引用不能修改期初") {
							Api.showTip(res.data.ErrorMsg);
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
							}, 1500);
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								item.isHas = true;
							});
							that.QCKCList = that.QCKCList.concat(res.data.ResultMsg);
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				});
			},
			//获取仓库
			GetStoreMessage() {
				let data = {};
				var _this = this;
				Api.Get_StoreMessage(data, function(res) {
					if (res.state) {
						console.log(res);
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							_this.list = [];
							_this.storeList = res.data.ResultMsg;
							for (let item in res.data.ResultMsg) {
								_this.list.push(res.data.ResultMsg[item].StoreName);
								if (res.data.ResultMsg.length > 0) {
									_this.TempStoreList = res.data.ResultMsg;
									_this.storeList = res.data.ResultMsg;
									// if (item == 0) {
									// 	_this.StoreName = res.data.ResultMsg[item].StoreName;
									// 	_this.StoreID = res.data.ResultMsg[item].StoreID;
									// }
								}
							}
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			getSelectValue(res) {
				for (let item in this.storeList) {
					if (item == res.index) {
						this.StoreID = this.storeList[item].StoreID;
						this.StoreName = this.storeList[item].StoreName;
					}
				}
			},
			//修改宽度
			changeWidth() {
				this.showChange = true;
			},
			hideChaneg() {
				this.showChange = false;
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//跳转到筛选条件页
			filter() {
				uni.navigateTo({
					url: './info-storeuseFilter'
				})
			},
			//将数额保留两位小数
			setGetTwoFloat(arr) {
				arr.forEach((item, index) => {
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].real_Amount = Api.setTwoFloat(item.real_Amount);
					arr[index].return_qty = Api.setTwoFloat(item.return_qty);
					arr[index].real_qty2 = Api.setTwoFloat(item.real_qty2);
					arr[index].real_qty = Api.setTwoFloat(item.real_qty);
					arr[index].return_qty2 = Api.setTwoFloat(item.return_qty2);
					arr[index].Qty = Api.setTwoFloat(item.Qty);
					arr[index].Amount = Api.setTwoFloat(item.Amount);
				});
				return arr;
			},
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
			changeListAl: function() {
				this.isList = !this.isList;
			},
			//显示模态框
			showModals(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			//显示模态框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			//隐藏模态框
			hideModal(e) {
				this.modalName = null
			},
			//隐藏模态框
			hideModals(e) {
				this.modalName = "DialogModal1"
			},
			Add() {
				if (this.SelectStoreObj.StoreID == "") {
					Api.showTip("请先选择仓库");
					return;
				}
				if (this.Price == 0 && this.Price == "") {
					Api.showTip("成本价不能为0");
					return;
				}
				// this.QCKCList = [];
				var item = {
					Qty: this.Qty,
					Price: this.Price,
					StoreID: this.SelectStoreObj.StoreID,
					StoreName: this.SelectStoreObj.StoreName,
					isHas: false
				}
				this.newQCList.push(item);
				uni.setStorageSync("qckc", JSON.stringify(this.newQCList));
				this.QCKCList.push(item);
				this.Qty = 0;
				this.Price = 0;
				this.modalName = null;
			}
		},
		data() {
			return {
				//td宽度列表
				tdWidth: [50, 125, 125, 125, 125],
				//输入框的值
				goodTypeVaule: "",
				//tb表头
				tdHeaderList: [{
						name: "序号"
					},
					{
						name: "数量"
					}, {
						name: "成本价"
					}, {
						name: "金额"
					}, {
						name: "仓库"
					}
				],
				SearchOptionName: "",
				//期初库存的临时数组
				QCKCList: [],
				storeList: [],
				Qty: 0,
				Price: 0,
				StoreID: "",
				StoreName: "",
				modalName: null,
				list: [],
				GoodsID: "",
				newQCList: [],
				isAdd: true,

				SelectStoreObj: {
					StoreName: "",
					StoreID: ""
				},
				SearchStoreName: "",
				TempStoreList: []

			}
		}
	}
</script>

<style lang="scss">
	@import url('../../style/changecolum.scss');
	/*图标的大小*/
	$iconWidth:40upx;
	$iconHeight:40upx;
	$iconBackSize:40upx;

	.cu-dialog {
		overflow: initial;
	}

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
	}

	.wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: $bb-bg-color;
		display: table;

		.header {
			position: relative;
			text-align: center;
			font-size: 32upx;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}

			.filter {
				width: $iconWidth;
				height: $iconHeight;
				position: absolute;
				right: 20upx;
				top: 30upx;
				background: url(../../static/cg/filter.png);
			}
		}
	}

	.container {
		font-size: 14px;

		.curstom {
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			padding-left: 10px;
			padding-right: 10px;
			box-sizing: border-box;
			background: #030ed9;
			box-sizing: border-box;
			color: #FFF;

			.curstomName {
				flex: 1;
				text-align: center;
			}

			.filterTime {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;

				text {
					flex: 1;
					line-height: 50upx;
					height: 50upx;

				}
			}

			.changeList {
				width: 60upx;
				height: 60upx;
				background: url(../../static/changeIcon.png) no-repeat;
				background-size: 100%;
				margin-top: 30upx;
			}
		}

		//表格单据
		.orderList {
			width: 100%;
			overflow: auto;
			box-sizing: border-box;

			text {
				float: left;
				text-align: center;
				box-sizing: border-box;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				border-right: 1px solid #ebebeb;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;


				&:last-child {
					border: none;
				}
			}

			.orderNav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				overflow: hidden;
			}

			.orderLi {
				background: #ebebeb;

				.orderItem {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #ebebeb;
					box-sizing: border-box;
					border-bottom: 1px solid #CCCCCC;
					border-left: 1px solid #CCC;
					border-right: 1px solid #CCC;

					text {
						border-right: 1px solid #CCC;

						&:last-child {
							border: none;
						}
					}
				}
			}

			.allPrice {
				@extend .orderNav;
				background: #030ed9;
				color: #FFF;
			}
		}

		.flOptions {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			text-align: center;
			position: fixed;
			bottom: 0upx;
			left: 0upx;
			z-index: 999;

			button {
				flex: 1;
				height: 100upx;
				border-radius: 0upx;
				background: rgba(124, 170, 216, 1);
				color: #FFF;

				&:first-child {
					border-right: 1px solid #FFF;
				}
			}
		}

		//列表单据
		.orderLookAllList {
			width: 100%;
			background: #ebebeb;
			box-sizing: border-box;
			padding: 30upx;
			box-sizing: border-box;
			overflow: auto;

			.orderLookItem {
				width: 100%;
				height: 220upx;
				overflow: hidden;
				position: relative;
				border-radius: 20upx;
				background: #FFF;
				box-sizing: border-box;
				padding-left: 30upx;
				padding-right: 100upx;
				padding-top: 5upx;
				padding-bottom: 5upx;
				margin-bottom: 20upx;
			}

			.lookMoreInfo {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/pull.png) no-repeat;
				position: absolute;
				bottom: 10upx;
				right: 10upx;
				padding: 0upx;
				background-size: 100% 100%;
				transition: height 2s;
			}

			text {
				display: block;
				font-size: 30upx;

				&:nth-child(1) {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: $iconWidth;
					height: $iconHeight;
					border-radius: 10upx;
					text-align: center;
					display: table;
					color: #000;
					line-height: $iconHeight;
					padding: 5upx;
				}

				&:nth-child(n+2) {
					height: 55upx;
					line-height: 55upx;
					display: table;
				}
			}

			.lookMoreClass {
				display: table;

			}

			.openAndClose {
				transform: rotate(180deg);
			}
		}

	}

	.gs {
		text-align: left;
	}

	.cu-form-group {
		display: flex;
	}

	/* 弹框样式 */
	.padding-xl .searchStore {
		display: flex;
		width: 100%;
		margin: auto;
		height: 45px;
		padding-top: 5px;
		font-size: 14px;
	}

	.padding-xl .searchStore input {
		flex: 1;
		height: 35px;
		border: 1px solid #CCC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		padding-left: 10px;
	}

	.padding-xl {
		padding: 10px;

	}

	.padding-xl .searchStore button {
		font-size: 14px;
		color: #FFF;
		padding-left: 8px;
		padding-right: 8px;
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		text-align: center;
		background: rgba(124, 170, 216, 1);
	}

	.padding-xl .StoreListWrap {
		height: 250px;
		overflow: auto;
	}

	.padding-xl .StoreListWrap view {
		height: 40px;
		line-height: 40px;
		text-align: left;
		border-bottom: 1px solid #CCC;
		padding-left: 8px;
	}

	.cu-form-group {
		padding: 1px 10px !important;
		height: 40px;
		line-height: 40px;
		min-height: 40px;
	}

	/* 表头 */
	.tabHeader {
		width: 100%;
		height: 200px;
		overflow: hidden;
		position: relative;
		padding-bottom: 40px;
	}

	.tabHeader.tabHeaderMore {
		width: 100%;
		display: table;
	}

	.inpt1 {
		text-align: left;
		flex: 1;
	}

	/* 查看更多按钮 */
	.lookHeaderMore {
		width: 100%;
		position: absolute;
		bottom: 0px;
		left: 0px;
		z-index: 100;
	}

	.nowGoodCount {
		width: 100%;
		height: 40px;
		line-height: 40px;
		padding-left: 5%;
		background: #FFF;
		display: flex;
		position: fixed;
		bottom: 0px;
		left: 0px;
		border-top: 1px solid #CCC;
		z-index: 999;
		background: rgba(124, 170, 216, 1);
		color: #FFF;
	}

	.nowGoodCount view {
		flex: 1;
		box-sizing: border-box;
	}

	/* 返回顶部按钮 */
	.quiteTop {
		width: 50px;
		height: 50px;
		padding-top: 5px;
		line-height: 20px;
		background: rgba(0, 0, 0, .8);
		border-radius: 25px;
		text-align: center;
		font-size: 12px;
		position: fixed;
		bottom: 20px;
		right: 10px;
		z-index: 999;
		color: #FFF;
	}

	.picker {
		text-align: left !important;
	}

	.red {
		color: red;
	}

	.padding-xl .GoodsListWrap {
		height: 250px;
		overflow: auto;
	}

	.padding-xl .GoodsListWrap view {
		height: 40px;
		padding: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 5px;
	}

	.padding-xl .GoodsListWrap view image {
		width: 40px;
		height: 40px;
	}

	.padding-xl .GoodsListWrap view text {
		flex: 1;
		height: 40px;
		line-height: 40px;
		text-align: left;
		padding-left: 10px;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
